<template>
  <div class="chart"></div>
</template>
      
  <script>
import * as echarts from "echarts";
import Axios from "axios";

export default {
  name: "LineChart",
  data() {
    return {
      chart: null,
      time: [],
      gasData: [],
      timer: null,
    };
  },
  mounted() {
    //this.getGasData();
    this.initChart();
    this.timer = setInterval(() => {
      this.updateData();
    }, 1500);
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    // this.chart = null;
    clearInterval(this.timer);
  },
  methods: {
    initChart() {
      //初始化图表
      this.chart = echarts.init(this.$el);
      //设置图表
      this.chart.setOption({
        xAxis: {
          type: "category",
          data: this.time,

          axisLabel: {
            show: false,//隐藏x轴
          },
          axisLine: {
            // show: false,
          },
        },
        yAxis: {
          type: "value",
          name: "%LEL",
        },
        series: [
          {
            data: this.gasData,
            type: "line",
            smooth: true,
            animationDuration: 3000,
          },
        ],
        tooltip: {
          trigger: "axis",
          // 鼠标悬浮提示框显示 X和Y 轴数据
          backgroundColor: "rgba(32, 33, 36,0.5)",
          borderColor: "rgba(32, 33, 36,0.30)",
          textStyle: {
            // 文字提示样式
            color: "#fff",
            fontSize: "12",
          },
        },
      });
    },
    //获取气体信息
    getGasData() {
      let formData = new FormData();
      formData.append("combDevId", 1);
      formData.append("quantity", 30);
      Axios.post("/gas/data", formData).then((res) => {
        var x = [];
        var y = [];
        var z = [1, 2, 3, 4];
        for (var item of res.data) {
          x.push(item.combTime.slice(10, 19));
          y.push(item.combLel);
        }
        this.time = x;
        this.gasData = y;
        console.log(this.time);
        console.log(this.gasData);
      });
    },
    //更新信息
    updateData() {
      var date = new Date();
      var h =
        date.getHours() < 10
          ? "0" + date.getHours() + ":"
          : date.getHours() + ":";
      var m =
        date.getMinutes() < 10
          ? "0" + date.getMinutes() + ":"
          : date.getMinutes() + ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      var now = h + m + s;
      this.time.push(now);
      //生成随机数
      var data = Math.floor(Math.random() * 30+50) + 1;
      // var data = 80;
      this.gasData.push(data);
      console.log(this.chart);
      this.chart.setOption({
        series: [
          {
            data: this.gasData,
            type: "line",
            smooth: true,
            animationEasing: function (k) {
              if ((k *= 2) < 1) {
                return 0.5 * k * k * k;
              }
              return 0.5 * ((k -= 2) * k * k + 2);
            },
            animationDuration: 1000,
          },
        ],
        tooltip: {
          trigger: "axis",
          // 鼠标悬浮提示框显示 X和Y 轴数据
          backgroundColor: "rgba(32, 33, 36,0.5)",
          borderColor: "rgba(32, 33, 36,0.30)",
          textStyle: {
            // 文字提示样式
            color: "#fff",
            fontSize: "12",
          },
        },
      });
    },
  },
};
</script>
    <style scoped>
.chart {
  width: 350px;
  height: 250px;
}
</style>
      